<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card class="box-card">
        <div class="cr_s">
          <div class="cr_s_img">
            <img src="../assets/images/headsculpture.png" alt="" />
          </div>
          <div class="cr_s_name">
            <p class="name">Admin</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="cr_x">
          <p>上次登录时间:<span>{{time}}</span></p>
          <p>上次登录地点:<span>郑州</span></p>
        </div>
      </el-card>

      <el-card class="box-card_ist" style="height: 445px">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="curriculum" label="课程" align="center">
          </el-table-column>
          <el-table-column prop="today" label="今日购买" align="center">
          </el-table-column>
          <el-table-column prop="thismonth" label="本月购买" align="center">
          </el-table-column>
          <el-table-column prop="all" label="总购买" align="center">
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16">
      <div class="num">
        <el-card v-for="item in countData" :key="item.name">
          <i
            class="icon"
            :class="`el-icon-${item.icon}`"
            :style="{ background: item.color }"
          ></i>
          <div class="dist">
            <p class="d_n">{{ item.name }}</p>
            <p class="d_v">{{ item.value }}</p>
          </div>
        </el-card>
      </div>
      <el-card style="height: 280px; margin-top: 10px">
        <div ref="echarts1" style="height: 280px"></div>
      </el-card>
      <div class="gras">
        <el-card style="height: 260px"
          ><div ref="echarts2" style="height: 260px"></div>
        </el-card>
        <el-card style="height: 260px">
          <div ref="echarts3" style="height: 230px"></div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { getData } from "@/utils/api";
import * as echarts from "echarts";
export default {
  name: "index",
  data() {
    return {
      tableData: [],
      countData: [],
      time:''
    };
  },
  methods: {
    getTime(time) {
      var date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear(),
        M =
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1,
        D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(),
        h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
        m =
          date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
        s =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + "-" + M + "-" + D + " " + h + ":" + m + ":" + s;
    },
  },
  mounted() {
    console.log(window.localStorage.getItem("tokenStartTime"));
    let aa = window.localStorage.getItem("tokenStartTime");
    this.time =  this.getTime(parseInt(aa))
    // 请求数据
    getData().then(({ data }) => {
      // console.log(data);
      const { tableData, countData, gradData, userData, videoData } = data.data;
      this.tableData = tableData;
      this.countData = countData;

      // 折线图
      const echarts1 = echarts.init(this.$refs.echarts1);
      const xAxis = Object.keys(gradData.data[0]);
      var echartsOption = {
        title: {
          text: "Stacked Line",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          // data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxis,
        },
        yAxis: {
          type: "value",
        },
      };
      echartsOption.series = [];
      xAxis.forEach((key) => {
        echartsOption.series.push({
          name: key,
          data: gradData.data.map((item) => item[key]),
          type: "line",
        });
      });
      // console.log(echartsOption);
      echarts1.setOption(echartsOption);
      // 柱状图
      const echarts2 = echarts.init(this.$refs.echarts2);
      var echarts2Option = {
        title: {
          text: "",
        },
        tooltip: {
          show: true,
          trigger: "axis",
        },
        legend: {},
        xAxis: {
          type: "category",
          data: userData.map((item) => item.data),
          axisLine: {
            lineStyle: {
              color: "#17b3a3",
            },
          },
          axisLabel: {
            interval: 0,
            color: "#333",
          },
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#17b3a3",
              },
            },
          },
        ],
        series: [
          {
            name: "新增用户",
            type: "bar",
            data: userData.map((item) => item.new),
          },
          {
            name: "活跃用户",
            type: "bar",
            data: userData.map((item) => item.action),
          },
        ],
      };
      echarts2.setOption(echarts2Option);
      // 饼状图
      const echarts3 = echarts.init(this.$refs.echarts3);
      var echarts3Option = {
        title: {
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          // bottom: 10,
          // left: "center",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: videoData,
          },
        ],
      };
      echarts3.setOption(echarts3Option);
    });
  },
};
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.box-card {
  margin-bottom: 20px;
  .cr_s {
    display: flex;
    align-content: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    margin-bottom: 20px;
    .cr_s_img {
      width: 150px;
      height: 150px;
      margin-left: 20px;
      img {
        width: 100%;
        border-radius: 50%;
      }
    }
    .cr_s_name {
      margin-left: 40px;
      .name {
        font-size: 30px;
        margin-top: 40px;
      }
      .access {
        color: #cc1;
      }
    }
  }
  .cr_x {
    p {
      line-height: 28px;
      margin-left: 20px;
      font-size: 16px;
      color: #ccc;
      span {
        margin-left: 10px;
        font-size: 14px;
        color: black;
      }
    }
  }
}
.num {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  // margin-top: 10px;
  .el-card {
    width: 340px;
    margin-bottom: 10px;
    /deep/.el-card__body {
      display: flex;
      padding: 0;
      .icon {
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        font-size: 30px;
        color: #fff;
      }
      .dist {
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin-left: 20px;
        .d_n {
          font-size: 22px;
          font-weight: 700;
          margin-bottom: 10px;
        }
        .d_v {
          font-size: 14px;
          color: #ccc;
        }
      }
    }
  }
}
.gras {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .el-card {
    width: 49%;
  }
}
</style>
